<template>
  <div class="dynamic-quality-table">
    <div class="table-toolbar" style="margin-bottom: 6px;">
      <!-- 编辑/保存按钮 -->
      <template v-if="showEditButton">
        <el-tooltip :content="editStatus ? '取消编辑' : '编辑'" placement="bottom">
          <el-button type="default" size="mini" :icon="editStatus ? 'el-icon-close' : 'el-icon-edit'" class="tool-btn" @click="$emit('toggle-edit')" />
        </el-tooltip>
        <el-tooltip v-if="editStatus" content="保存" placement="bottom">
          <el-button type="default" size="mini" icon="el-icon-check" class="tool-btn" @click="$emit('save')" />
        </el-tooltip>
      </template>

      <!-- 添加按钮 -->
      <el-tooltip v-if="showAddButton && showSelection" content="添加" placement="bottom">
        <el-button type="default" size="mini" icon="el-icon-plus" class="tool-btn" @click="handleAddRow" />
      </el-tooltip>

      <!-- 删除按钮 -->
      <el-tooltip v-if="showDeleteButton && showSelection" content="删除" placement="bottom">
        <el-button type="default" size="mini" icon="el-icon-delete" class="tool-btn" @click="handleDeleteRow" />
      </el-tooltip>

      <!-- 刷新按钮 -->
      <el-tooltip v-if="showRefreshButton" content="刷新" placement="bottom">
        <el-button type="default" size="mini" icon="el-icon-refresh" :loading="tableLoading" class="tool-btn" @click="$emit('refresh')" />
      </el-tooltip>

      <!-- 紧凑/尺寸按钮 -->
      <el-dropdown v-if="showSizeButton" trigger="click" class="tool-dropdown" @command="handleSizeCommand">
        <el-button type="default" size="mini" icon="el-icon-menu" class="tool-btn">
          {{ currentSizeLabel }}
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="preset in SIZE_PRESETS"
            :key="preset.size"
            :command="preset.size"
            :style="{ backgroundColor: currentSize === preset.size ? '#409EFF' : '', color: currentSize === preset.size ? '#fff' : '' }"
          >
            {{ preset.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!-- 列设置按钮 -->
      <el-popover
        v-if="showColumnButton"
        placement="bottom-start"
        width="220"
        trigger="click"
        popper-class="column-setting-popover"
      >
        <div class="column-setting">
          <div class="column-setting__header">
            <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAll"
            >
              列展示
            </el-checkbox>
            <el-button type="text" size="mini" @click="handleResetColumns">重置</el-button>
          </div>
          <div class="column-setting__scrollbar">
            <el-checkbox-group
              v-model="checkedColumns"
              @change="handleColumnCheck"
            >
              <div
                v-for="(item, index) in columnOptionList"
                :key="index"
                :class="['column-setting__item', { 'is-group': item.isGroup, 'is-child': item.isChild }]"
              >
                <div v-if="item.isGroup" class="column-group-title">
                  {{ item.label }}
                </div>
                <el-checkbox
                  v-else
                  :label="item.label"
                  :disabled="item.fixed"
                >
                  <span class="column-setting__label" :title="item.displayLabel || item.label">
                    {{ item.displayLabel || item.label }}
                  </span>
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
        <el-button slot="reference" type="default" size="mini" icon="el-icon-setting" class="tool-btn" title="列设置" />
      </el-popover>

      <!-- 全屏按钮 -->
      <el-tooltip v-if="showFullscreenButton" content="全屏" placement="bottom">
        <el-button type="success" size="mini" icon="el-icon-full-screen" class="tool-btn" @click="fullScreenVisible = true" />
      </el-tooltip>
    </div>
    <el-table
      ref="qualityTable"
      :data="tableData"
      :columns="displayColumns"
      border
      :loading="tableLoading"
      cell-align="center"
      header-cell-align="center"
      class="quality-table"
      :row-height="rowHeight"
      :row-style="rowStyle"
      :cell-style="cellStyle"
      :header-row-style="headerRowStyle"
      :header-cell-style="headerCellStyle"
      :span-method="spanMethod"
      :row-class-name="rowClassName"
      @selection-change="handleSelectionChange"
      :style="{
        '--row-height': `${rowHeight}px`,
        '--font-size': `${fontSize}px`
      }"
    >
      <!-- 复选框列 -->
      <el-table-column
        v-if="showSelection"
        type="selection"
        width="40"
        :selectable="checkSelectable"
        :resizable="false"
      />
      <el-table-column
        v-for="(col, idx) in displayColumns"
        :key="`col_${idx}_${col.label}`"
        :label="col.label"
        :width="col.width"
        :min-width="col.minWidth"
        :prop="col.prop"
        :resizable="false"
      >
        <template v-if="col.children && col.children.length">
          <el-table-column
            v-for="(childCol, childIdx) in col.children"
            :key="`child_${idx}_${childIdx}_${childCol.label}`"
            :label="childCol.label"
            :prop="childCol.prop"
            :width="childCol.width"
            :min-width="childCol.minWidth"
            :resizable="false"
          >
            <template slot-scope="scope">
              <el-input
                v-if="editStatus && !childCol.disabled && !scope.row.isTotal && childCol.type === 'number-input'"
                v-model.number="scope.row[childCol.prop]"
                type="number"
                size="mini"
                class="table-input"
              />
              <el-input
                v-else-if="editStatus && !childCol.disabled && !scope.row.isTotal && childCol.type"
                v-model="scope.row[childCol.prop]"
                size="mini"
                class="table-input"
              />
              <span v-else :style="{ fontSize: `${fontSize}px` }">{{ scope.row[childCol.prop] }}</span>
            </template>
          </el-table-column>
        </template>
        <template v-if="!col.children || !col.children.length" slot-scope="scope">
          <el-date-picker
            v-if="editStatus && !col.disabled && !scope.row.isTotal && col.type === 'date-picker'"
            v-model="scope.row[col.prop]"
            type="date"
            size="mini"
            value-format="yyyy-MM-dd"
            class="table-picker"
          />
          <el-input
            v-else-if="editStatus && !col.disabled && !scope.row.isTotal && col.type === 'number-input'"
            v-model.number="scope.row[col.prop]"
            type="number"
            size="mini"
            class="table-input"
          />
          <el-input
            v-else-if="editStatus && !col.disabled && !scope.row.isTotal && col.type"
            v-model="scope.row[col.prop]"
            size="mini"
            class="table-input"
          />
          <span v-else :style="{ fontSize: `${fontSize}px` }">{{ scope.row[col.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="!tableLoading && tableData.length === 0" class="no-data" :style="{ fontSize: `${fontSize}px` }">
      暂无数据，请选择查询条件
    </div>

    <!-- 全屏弹窗 -->
    <el-dialog
      title=""
      :visible.sync="fullScreenVisible"
      fullscreen
      :close-on-click-modal="false"
      class="fullscreen-dialog"
    >
      <div class="fullscreen-content">
        <div class="table-toolbar" style="margin-bottom: 16px;">
          <el-tooltip :content="editStatus ? '取消编辑' : '编辑'" placement="bottom">
            <el-button type="default" size="mini" :icon="editStatus ? 'el-icon-close' : 'el-icon-edit'" class="tool-btn" @click="$emit('toggle-edit')" />
          </el-tooltip>
          <el-tooltip v-if="editStatus" content="保存" placement="bottom">
            <el-button type="default" size="mini" icon="el-icon-check" class="tool-btn" @click="$emit('save')" />
          </el-tooltip>
          <el-tooltip v-if="showSelection" content="添加" placement="bottom">
            <el-button type="default" size="mini" icon="el-icon-plus" class="tool-btn" @click="handleAddRow" />
          </el-tooltip>
          <el-tooltip v-if="showSelection" content="删除" placement="bottom">
            <el-button type="default" size="mini" icon="el-icon-delete" class="tool-btn" @click="handleDeleteRow" />
          </el-tooltip>
          <el-tooltip content="刷新" placement="bottom">
            <el-button type="default" size="mini" icon="el-icon-refresh" :loading="tableLoading" class="tool-btn" @click="$emit('refresh')" />
          </el-tooltip>
          <el-dropdown trigger="click" class="tool-dropdown" @command="handleSizeCommand">
            <el-button type="default" size="mini" icon="el-icon-menu" class="tool-btn">
              {{ currentSizeLabel }}
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="preset in SIZE_PRESETS"
                :key="preset.size"
                :command="preset.size"
                :style="{ backgroundColor: currentSize === preset.size ? '#409EFF' : '', color: currentSize === preset.size ? '#fff' : '' }"
              >
                {{ preset.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-popover
            placement="bottom-start"
            width="220"
            trigger="click"
            popper-class="column-setting-popover"
          >
            <div class="column-setting">
              <div class="column-setting__header">
                <el-checkbox
                  v-model="checkAll"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAll"
                >
                  列展示
                </el-checkbox>
                <el-button type="text" size="mini" @click="handleResetColumns">重置</el-button>
              </div>
              <div class="column-setting__scrollbar">
                <el-checkbox-group
                  v-model="checkedColumns"
                  @change="handleColumnCheck"
                >
                  <div
                    v-for="(item, index) in columnOptionList"
                    :key="index"
                    :class="['column-setting__item', { 'is-group': item.isGroup, 'is-child': item.isChild }]"
                  >
                    <div v-if="item.isGroup" class="column-group-title">
                      {{ item.label }}
                    </div>
                    <el-checkbox
                      v-else
                      :label="item.label"
                      :disabled="item.fixed"
                    >
                      <span class="column-setting__label" :title="item.displayLabel || item.label">
                        {{ item.displayLabel || item.label }}
                      </span>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
            <el-button slot="reference" type="default" size="mini" icon="el-icon-setting" class="tool-btn" title="列设置" />
          </el-popover>
        </div>

        <el-table
          ref="fullscreenTable"
          :data="tableData"
          :columns="displayColumns"
          border
          :loading="tableLoading"
          cell-align="center"
          header-cell-align="center"
          class="quality-table"
          :row-height="rowHeight"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          :header-row-style="headerRowStyle"
          :header-cell-style="headerCellStyle"
          :span-method="spanMethod"
          :row-class-name="rowClassName"
          @selection-change="handleSelectionChange"
          height="calc(100vh - 160px)"
          :style="{
            '--row-height': `${rowHeight}px`,
            '--font-size': `${fontSize}px`
          }"
        >
          <!-- 复选框列 -->
          <el-table-column
            v-if="showSelection"
            type="selection"
            width="40"
            :selectable="checkSelectable"
            :resizable="false"
          />
          <el-table-column
            v-for="(col, idx) in displayColumns"
            :key="`fullscreen_col_${idx}_${col.label}`"
            :label="col.label"
            :width="col.width"
            :min-width="col.minWidth"
            :prop="col.prop"
            :resizable="false"
          >
            <template v-if="col.children && col.children.length">
              <el-table-column
                v-for="(childCol, childIdx) in col.children"
                :key="`fullscreen_child_${idx}_${childIdx}_${childCol.label}`"
                :label="childCol.label"
                :prop="childCol.prop"
                :width="childCol.width"
                :min-width="childCol.minWidth"
                :resizable="false"
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="editStatus && !childCol.disabled && !scope.row.isTotal && childCol.type === 'number-input'"
                    v-model.number="scope.row[childCol.prop]"
                    type="number"
                    size="mini"
                    class="table-input"
                  />
                  <el-input
                    v-else-if="editStatus && !childCol.disabled && !scope.row.isTotal && childCol.type"
                    v-model="scope.row[childCol.prop]"
                    size="mini"
                    class="table-input"
                  />
                  <span v-else :style="{ fontSize: `${fontSize}px` }">{{ scope.row[childCol.prop] }}</span>
                </template>
              </el-table-column>
            </template>
            <template v-if="!col.children || !col.children.length" slot-scope="scope">
              <el-date-picker
                v-if="editStatus && !col.disabled && !scope.row.isTotal && col.type === 'date-picker'"
                v-model="scope.row[col.prop]"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                class="table-picker"
              />
              <el-input
                v-else-if="editStatus && !col.disabled && !scope.row.isTotal && col.type === 'number-input'"
                v-model.number="scope.row[col.prop]"
                type="number"
                size="mini"
                class="table-input"
              />
              <el-input
                v-else-if="editStatus && !col.disabled && !scope.row.isTotal && col.type"
                v-model="scope.row[col.prop]"
                size="mini"
                class="table-input"
              />
              <span v-else :style="{ fontSize: `${fontSize}px` }">{{ scope.row[col.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>

        <div v-if="!tableLoading && tableData.length === 0" class="no-data" :style="{ fontSize: `${fontSize}px` }">
          暂无数据，请选择查询条件
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const SIZE_PRESETS = Object.freeze([
  { size: 'mini', rowHeight: 30, fontSize: 12, label: '紧凑' },
  { size: 'small', rowHeight: 36, fontSize: 13, label: '默认' },
  { size: 'medium', rowHeight: 42, fontSize: 14, label: '宽松' }
])

export default {
  name: 'DynamicQualityTable',
  props: {
    // 数据相关
    columns: { type: Array, default: () => [] },
    tableData: { type: Array, default: () => [] },
    editStatus: { type: Boolean, default: false },
    tableLoading: { type: Boolean, default: false },

    // 样式相关
    rowHeight: { type: Number, default: 22 },
    fontSize: { type: Number, default: 12 },

    // 高级功能
    spanMethod: { type: Function, default: null }, // 自定义行列合并方法
    rowClassName: { type: Function, default: null }, // 自定义行样式类名

    // 功能开关 - 细粒度控制每个按钮和功能
    showSelection: { type: Boolean, default: false },      // 是否显示复选框列
    showEditButton: { type: Boolean, default: true },      // 是否显示编辑/保存按钮
    showAddButton: { type: Boolean, default: true },       // 是否显示添加按钮
    showDeleteButton: { type: Boolean, default: true },    // 是否显示删除按钮
    showRefreshButton: { type: Boolean, default: true },   // 是否显示刷新按钮
    showSizeButton: { type: Boolean, default: true },      // 是否显示紧凑/尺寸按钮
    showColumnButton: { type: Boolean, default: true },    // 是否显示列设置按钮
    showFullscreenButton: { type: Boolean, default: true } // 是否显示全屏按钮
  },
  data() {
    return {
      SIZE_PRESETS,
      checkAll: true,
      isIndeterminate: false,
      checkedColumns: [],
      columnOptionList: [],
      displayColumns: [],
      resizeObserver: null,
      fullScreenVisible: false,
      selectedRows: [] // 选中的行数据
    }
  },
  computed: {
    currentSize() {
      return this.rowHeight === 30 ? 'mini' : this.rowHeight === 36 ? 'small' : 'medium'
    },
    currentSizeLabel() {
      const preset = SIZE_PRESETS.find(p => p.rowHeight === this.rowHeight)
      return preset ? preset.label : '紧凑'
    },
    rowStyle() {
      return {
        height: `${this.rowHeight}px`
      }
    },
    cellStyle() {
      return {
        height: `${this.rowHeight}px`,
        fontSize: `${this.fontSize}px`,
        padding: '0px'
      }
    },
    headerRowStyle() {
      return {
        height: `${this.rowHeight}px`
      }
    },
    headerCellStyle() {
      return {
        minHeight: `${this.rowHeight}px`,
        fontSize: `${this.fontSize}px`,
        padding: '1px 2px',
        whiteSpace: 'normal',
        wordWrap: 'break-word',
        writingMode: 'horizontal-tb',
        textOrientation: 'mixed'
      }
    }
  },
  watch: {
    rowHeight: {
      immediate: true,
      handler(newVal) {
        console.log('🎯 [DynamicQualityTable] rowHeight 变化:', newVal)
        this.$nextTick(() => {
          this.syncTableLayout()
        })
      }
    },
    fontSize: {
      immediate: true,
      handler(newVal) {
        console.log('🎯 [DynamicQualityTable] fontSize 变化:', newVal)
        this.$nextTick(() => {
          this.syncTableLayout()
        })
      }
    },
    columns: {
      deep: true,
      immediate: true,
      handler() {
        this.initColumnData()
        this.$nextTick(() => {
          this.syncTableLayout()
        })
      }
    },
    displayColumns: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.syncTableLayout()
        })
      }
    },
    editStatus: {
      handler(newVal) {
        console.log('=== 编辑状态变化 ===')
        console.log('editStatus 变为:', newVal)
        console.log('当前 displayColumns:', this.displayColumns.map(col => ({
          label: col.label,
          type: col.type,
          disabled: col.disabled
        })))
      }
    }
  },
  beforeDestroy() {
    // 清理 ResizeObserver
    if (this.resizeObserver) {
      this.resizeObserver.disconnect()
      this.resizeObserver = null
    }

    this.columnOptionList = []
    this.checkedColumns = []
    this.displayColumns = []
  },
  mounted() {
    console.log('📋 [DynamicQualityTable] 组件挂载 - rowHeight:', this.rowHeight, 'fontSize:', this.fontSize)

    this.$nextTick(() => {
      this.syncTableLayout()
    })

    // 监听窗口大小变化
    this.resizeObserver = new ResizeObserver(() => {
      this.syncTableLayout()
    })
    const tableEl = this.$el.querySelector('.el-table')
    if (tableEl) {
      this.resizeObserver.observe(tableEl)
    }
  },
  updated() {
    this.$nextTick(() => {
      this.syncTableLayout()
    })
  },
  methods: {
    handleSizeCommand(size) {
      console.log('密度切换命令:', size)
      this.$emit('toggle-size', size)
    },
    /**
     * 复选框选择变化事件
     */
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    /**
     * 判断行是否可选（合计行和小计行不可选）
     */
    checkSelectable(row) {
      return !row.isTotal && row.system !== '小计'
    },
    /**
     * 处理添加行
     */
    handleAddRow() {
      // 过滤掉合计行和小计行
      const validSelectedRows = this.selectedRows.filter(row => !row.isTotal && row.system !== '小计')

      if (validSelectedRows.length === 0) {
        this.$message.warning('请先选择一行数据')
        return
      }

      if (validSelectedRows.length > 1) {
        this.$message.warning('只能选择一行数据')
        return
      }

      // 询问用户插入位置
      this.$confirm('请选择新行插入位置', '提示', {
        confirmButtonText: '选中行之后',
        cancelButtonText: '选中行之前',
        distinguishCancelAndClose: true,
        type: 'question'
      }).then(() => {
        // 用户选择"之后"
        this.$emit('add-row', { row: validSelectedRows[0], position: 'after' })
      }).catch((action) => {
        if (action === 'cancel') {
          // 用户选择"之前"
          this.$emit('add-row', { row: validSelectedRows[0], position: 'before' })
        }
        // 如果是 close，什么都不做
      })
    },
    /**
     * 处理删除行
     */
    handleDeleteRow() {
      // 过滤掉合计行和小计行
      const validSelectedRows = this.selectedRows.filter(row => !row.isTotal && row.system !== '小计')

      if (validSelectedRows.length === 0) {
        this.$message.warning('请先选择要删除的数据')
        return
      }

      // 确认删除
      const message = validSelectedRows.length === 1
        ? '确定要删除选中的这1行数据吗？'
        : `确定要删除选中的这${validSelectedRows.length}行数据吗？`

      this.$confirm(message, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户确认删除
        this.$emit('delete-row', { rows: validSelectedRows })
      }).catch(() => {
        // 用户取消删除
      })
    },
    syncTableLayout() {
      // 简单调用 Element UI 的 doLayout 即可
      this.$nextTick(() => {
        if (this.$refs.qualityTable) {
          this.$refs.qualityTable.doLayout()
        }
      })
    },
    hasChildren(col) {
      // 判断列是否有子列
      return col.children && col.children.length > 0
    },
    initColumnData() {
      this.columnOptionList = []
      this.columns.forEach(col => {
        if (col.children && col.children.length) {
          // 添加父列分组标题
          this.columnOptionList.push({
            label: col.label,
            fixed: col.fixed === true,
            isGroup: true,
            disabled: true
          })
          // 添加子列
          col.children.forEach(child => {
            this.columnOptionList.push({
              label: child.label,
              displayLabel: `  ${child.label}`,
              parentLabel: col.label,
              fixed: child.fixed === true || col.fixed === true,
              isChild: true
            })
          })
        } else {
          this.columnOptionList.push({
            label: col.label,
            fixed: col.fixed === true
          })
        }
      })
      // 只将非分组标题的列加入 checkedColumns
      this.checkedColumns = this.columnOptionList
        .filter(item => !item.isGroup)
        .map(item => item.label)
      this.checkAll = true
      this.isIndeterminate = false
      this.updateDisplayColumns()
    },
    updateDisplayColumns() {
      this.displayColumns = this.columns.map(col => {
        if (col.children && col.children.length) {
          const filteredChildren = col.children.filter(child => this.checkedColumns.includes(child.label))
          return filteredChildren.length ? { ...col, children: filteredChildren } : null
        } else {
          return this.checkedColumns.includes(col.label) ? { ...col } : null
        }
      }).filter(col => col !== null)

      // 调试：打印 displayColumns 查看是否包含 type 属性
      console.log('=== 调试信息 ===')
      console.log('displayColumns 数量:', this.displayColumns.length)
      console.log('editStatus:', this.editStatus)

      // 打印前3个列的详细信息
      this.displayColumns.slice(0, 3).forEach((col, index) => {
        console.log(`列 ${index + 1} [${col.label}]:`, {
          prop: col.prop,
          type: col.type,
          disabled: col.disabled,
          minWidth: col.minWidth,
          hasChildren: !!col.children
        })
      })

      // 打印表格数据的第一行
      if (this.tableData && this.tableData.length > 0) {
        console.log('第一行数据:', this.tableData[0])
      }
    },
    handleCheckAll(val) {
      // 过滤掉分组标题，只处理实际的列
      const actualColumns = this.columnOptionList.filter(item => !item.isGroup)
      this.checkedColumns = val ? actualColumns.map(item => item.label) : []
      this.isIndeterminate = false
      this.updateDisplayColumns()
    },
    handleColumnCheck(val) {
      this.checkedColumns = val
      const actualColumns = this.columnOptionList.filter(item => !item.isGroup)
      this.checkAll = val.length === actualColumns.length
      this.isIndeterminate = val.length > 0 && val.length < actualColumns.length
      this.updateDisplayColumns()
    },
    handleResetColumns() {
      // 过滤掉分组标题，只处理实际的列
      const actualColumns = this.columnOptionList.filter(item => !item.isGroup)
      this.checkedColumns = actualColumns.map(item => item.label)
      this.checkAll = true
      this.isIndeterminate = false
      this.updateDisplayColumns()
    }
  }
}
</script>

<style lang="scss" scoped>
.dynamic-quality-table {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  transition: all 0.3s ease;
}

.table-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  overflow: hidden;
}

.tool-btn {
  padding: 6px 12px !important;
  height: 28px !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

::v-deep .tool-btn .el-icon {
  line-height: 1 !important;
  vertical-align: middle !important;
}

::v-deep .tool-btn span {
  line-height: 1 !important;
  vertical-align: middle !important;
}

.tool-dropdown .el-button {
  padding: 6px 12px !important;
  width: auto;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.column-setting-popover {
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.column-setting {
  padding: 10px;
}

.column-setting__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

.column-setting__scrollbar {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;

    &:hover {
      background: #a8a8a8;
    }
  }
}

.column-setting__item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;

  &.is-group {
    margin-top: 12px;
    margin-bottom: 4px;
    cursor: default;
  }

  &.is-child {
    margin-bottom: 6px;
  }
}

.column-group-title {
  font-weight: 600;
  color: #303133;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid #e4e7ed;
  width: 100%;
}

.column-setting__label {
  display: inline-block;
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quality-table {
  width: 100%;

  // 表格行高控制
  ::v-deep .el-table__row {
    height: var(--row-height) !important;
  }

  // 表头单元格
  ::v-deep th.el-table__cell {
    padding: 1px 2px !important;
    border: 1px solid #e4e7ed !important;
    background-color: #f0f5ff !important;
    white-space: normal !important;
    height: auto !important;
    min-height: var(--row-height) !important;
    font-size: var(--font-size) !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  // 表头内部 div
  ::v-deep th.el-table__cell .cell {
    padding: 0 2px !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: var(--row-height) !important;
    font-size: var(--font-size) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  // 表体单元格
  ::v-deep td.el-table__cell {
    padding: 0px !important;
    border: 1px solid #e4e7ed !important;
    white-space: nowrap !important;
    overflow: visible !important;
    height: var(--row-height) !important;
    font-size: var(--font-size) !important;
  }

  // 表体单元格内部 div
  ::v-deep td.el-table__cell .cell {
    padding: 0 2px !important;
    line-height: var(--row-height) !important;
    height: var(--row-height) !important;
    font-size: var(--font-size) !important;
  }

  // 单元格内的 span 元素
  ::v-deep td.el-table__cell span {
    display: inline-block;
    line-height: var(--row-height) !important;
    font-size: var(--font-size) !important;
  }
}

.table-input, .table-picker {
  width: 100% !important;
  min-width: 40px !important;
}

::v-deep .table-input .el-input__inner,
::v-deep .table-picker .el-input__inner {
  height: calc(var(--row-height) - 6px) !important;
  line-height: calc(var(--row-height) - 6px) !important;
  font-size: var(--font-size) !important;
  padding: 0 4px !important;
  text-align: center !important;
  border: 1px solid #409EFF !important;
  box-sizing: border-box !important;
}

::v-deep .el-input--mini .el-input__inner {
  height: calc(var(--row-height) - 6px) !important;
  line-height: calc(var(--row-height) - 6px) !important;
  font-size: var(--font-size) !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

::v-deep .el-date-picker--mini .el-input__inner {
  height: calc(var(--row-height) - 6px) !important;
  line-height: calc(var(--row-height) - 6px) !important;
  font-size: var(--font-size) !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}

.no-data {
  text-align: center;
  padding: 20px 0;
  color: #999;
}

::v-deep .el-tooltip__popper {
  max-width: 200px;
}

// 全屏弹窗样式
.fullscreen-dialog {
  ::v-deep .el-dialog__header {
    background-color: #f5f7fa;
    padding: 16px 20px;
    border-bottom: 1px solid #e4e7ed;
  }

  ::v-deep .el-dialog__title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  ::v-deep .el-dialog__body {
    padding: 20px;
    background-color: #fff;
    height: calc(100vh - 60px);
    overflow: hidden;
  }
}

.fullscreen-content {
  height: 100%;
  display: flex;
  flex-direction: column;

  .quality-table {
    flex: 1;
    overflow: auto;
  }
}
</style>
